<template>
  <div
    class="sensor-list"
    v-infinite-scroll="scrollLoad"
    :infinite-scroll-distance="50"
    :infinite-scroll-immediate="false"
  >
    <template v-for="item in list" :key="item">
      <div class="sensor-item" @click="handleClick(item)">
        <div class="sensor-item-name">
          <div>
            <span class="sensor-item-name-text">{{ item.areaLocation }}</span>
            <span>&nbsp;&nbsp;·&nbsp;&nbsp;</span>
            <span>{{ item.sensorTypeName }}</span>
          </div>
        </div>
        <div class="sensor-item-location">
          <span>{{ item.areaName }}</span>
          <div>
            <span class="sensor-item-value">{{
              item.showValue.replace(item.unitCode, '') || '--'
            }}</span>
            <span class="sensor-item-value-unit">{{ item.unitCode }}</span>
          </div>
        </div>
        <div class="sensor-item-time">
          <span>工作时长 {{ item.keepTimeStr }}</span>
        </div>

        <div
          v-for="alarm in item.alarmList"
          :key="alarm.id"
          class="alarm"
          @click.stop="handleAlarmClick(item, alarm)"
        >
          <span>{{ alarm.alarmTypeName }}</span>
          <span>详情</span>
        </div>
      </div>
    </template>
    <div v-if="status" class="status">
      {{ status }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
import { useDialog } from '@/hooks/useDialog'
import SensorDetails from './sensorDetail/sensorDetail.vue'
import JcjkAlarmDetail from '../alarm/jcjkAlarmDetail/index.vue'
import { useAuthStore } from '@/store/auth'
import { storeToRefs } from 'pinia'
// 定义组件名称
defineOptions({
  name: 'SensorList'
})

// 定义接口
interface AlarmItem {
  id: string
  alarmTypeName: string
}

interface SensorItem {
  areaLocation: string
  sensorTypeName: string
  areaName: string
  showValue: string
  unitCode: string
  keepTimeStr: string
  alarmList: AlarmItem[]
}

const props = defineProps<{
  list: SensorItem[]
  status: string
}>()

const { openDialog } = useDialog({
  defaultWidth: 500,
  defaultHeight: 300
})
/**
 * 处理传感器项点击事件
 * @param item - 被点击的传感器项
 */
// 处理传感器项点击事件
const authStore = useAuthStore()
const { globalParams } = storeToRefs(authStore)
function handleClick(item: SensorItem) {
  if (globalParams.value.startTime && globalParams.value.endTime) {
    openDialog(item.areaLocation, SensorDetails, item, {
      width: 800,
      height: 430
    })
  } else {
    openDialog(item.areaLocation, SensorDetails, item)
  }
}

/**
 * 处理告警项点击事件
 * @param item - 包含告警的传感器项
 * @param alarm - 被点击的告警项
 */
function handleAlarmClick(item: SensorItem, alarm: AlarmItem) {
  openDialog(`${item.areaName} · ${alarm.alarmTypeName}`, JcjkAlarmDetail, alarm, {
    width: 800,
    height: 430
  })
}

const emit = defineEmits(['scrollLoad'])

const { scrollLoad } = useInfiniteScroll(() => {
  console.log('scrollLoad')
  emit('scrollLoad')
})
</script>

<style scoped lang="scss">
.sensor-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 16px;
  direction: rtl;
  .sensor-item {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--bg-color-page);
    margin-bottom: 8px;
    gap: 4px;
    cursor: pointer;
    direction: ltr;
    &:last-child {
      margin-bottom: 0;
    }
    .sensor-item-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      .sensor-item-name-text {
        color: var(--el-color-primary);
      }
    }
    .sensor-item-location {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 4px;
      font-size: 12px;
      color: var(--text-color-disabled);
      .sensor-item-value {
        font-size: 14px;
        color: var(--el-color-primary);
      }
      .sensor-item-value-unit {
        margin-left: 2px;
        font-size: 12px;
        color: var(--text-color-placeholder);
      }
    }
    .sensor-item-time {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-color-placeholder);
    }
    .alarm {
      margin-top: 8px;
      font-size: 12px;
      color: #ff0000;
      background: rgba(255, 0, 0, 0.23);
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .status {
    text-align: center;
    padding: 8px 0;
    direction: ltr;
  }
}
</style>
